<template>
  <div class="info_box scroll_box" v-if="title">
    <div class="info_header" v-if="type==='info'">
      <img class="info_header_img" :src="info.headerImg+'?x-oss-process=image/resize,m_fill,w_500,h_300,limit_0'" alt="">
      <div style="width:100%">
        <div class="info_span_tit">项目概况</div>
        <div class="info_span_content" v-for="(i,index) in info.survey" :key="index">
          <span class="info_span_content_tit">{{ i.name+'：' }}</span>{{ i.content }}
        </div>
      </div>
    </div>
    <div class="info_introduce" v-if="type==='info'">
      <h2 class="info_introduce_title">{{ info.title }}</h2>
      <div style="width:100%">
        <div class="info_span_tit">核心基因提取</div>
        <p class="info_text">{{ info.getGene }}</p>
      </div>
      <div style="width:100%">
        <div class="info_span_tit">项目简介</div>
        <p class="info_text" v-html="info.introduce"></p>
      </div>
    </div>
    <div class="info_ul" v-if="type==='info'">
      <div class="info_li" v-for="(i,index) in info.infoList" :key="index">
        <img :src="i.img+'?x-oss-process=image/resize,m_fill,w_300,h_225,limit_0'" alt="">
        <div class="info_li_text">
          <h2>{{ i.title }}</h2>
          <p class="info_li_text_subTitle">{{ i.subTitle }}</p>
          <p class="info_li_text_text">{{ i.text }}</p>
          <div class="info_li_text_line" v-if="i.span"></div><p class="info_li_text_span">{{ i.span }}</p>
        </div>
      </div>
    </div>
    <!-- 基因解码报告 -->
    <div v-if="type==='report'" class="report_box">
      <div v-html="info.text"></div>
    </div>

  </div>
</template>

<script>
import { infoList,reportList } from './newsList'
export default {
  name:'NewsInfo',
  props:{
    title:{
      type:String,
      default:''
    },
    type:{
      type:String,
      default:'info'
    }
  },
  computed:{
    info(){
      return this.type==='info'?infoList[this.title]:reportList[this.title]
    },
    isImg(){
      return (string)=>{
        let s = String(string).split('.')[String(string).split('.').length-1];
        return s==='png'||s==='jpg'||s==='jpeg'
      }
    },
    imgList(){
      return this.type.filter(i=>i.substring(i.length-3)!=='mp4')
    }
  }
}
</script>

<style scoped>
.info_box{
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
  font-size: 16px;
  color: #fff;
}
.info_header{
  display: inline-block;
  width: 500px;
  font-size: 0;
  border-radius: 10px;
  overflow: hidden;
}
.info_introduce_title{
  margin-bottom: 20px;
}
.info_header_img{
  width: 100%;
}
.info_introduce{
  width: calc(100% - 500px);
  color: #fff;
  padding: 20px;
}
.info_introduce>h2{
  font-size: 40px;
}
.info_span_tit{
  display: inline-block;
  font-weight: bolder;
  background: linear-gradient(to left top, #229bd2, #194483);
  padding: 3px 10px;
  text-align: center;
  border-radius: 5px;
  margin-right: 8px;
  flex-basis: 100px;
  font-size: 16px;
  line-height: 25px;
  margin: 10px 0;
}
.info_text{
  line-height: 32px;
  text-indent:2em;
  font-size: 16px;
}
.info_span_content{
  font-size: 16px;
  line-height: 32px;
  font-weight: 100;
}
.info_span_content_tit{
  font-weight: bold;
}

.info_ul{
  width: 100%;
}
.info_li{
  width: 100%;
  background: rgba(50, 207, 230, .09);
  border-radius: 10px;
  font-size: 0;
  padding: 10px;
  margin-bottom: 20px;
  display: flex;
  flex-flow: row nowrap;
}
.info_li>img{
  width: 300px;
}
.info_li_text{
  width: calc(100% - 300px);
  color: #fff;
  font-size: 16px;
  font-weight: 100;
  padding: 10px 30px;
}
.info_li_text>h2{
  margin:0 0 10px 0;
}
.info_li_text_subTitle{
  background: rgba(9, 106, 148, 0.719);
  padding: 5px 10px;
  border-radius: 20px;
}
.info_li_text_text{
  text-indent:2em;
  line-height: 32px;
}
.info_li_text_line{
  width: 8px;
  height: 20px;
  background: #fff;
  display: inline-block;
  float: left;
}
.info_li_text_span{
  font-size: 13px;
  display: inline-block;
  width: calc(100% - 15px);
  float: right;
}

.report_box{
  width: 80%;
  margin: auto;
}


</style>
